<template>
    <div class="body-wrap">
        <div class="title-box">
            <h1 style="font-size: 1.8rem;font-weight: normal;">任务列表</h1>
            <div class="img-right" @click="clickSelect">
                <img src="../../assets/images/tasklist/shaixuan.png" />
            </div>
        </div>
        <div class="task-list-box">
            <div class="list-item" v-for="(item, index) in tableTask" :key="index" @click="clickDetail(item.taskInfo.id)">
                <div class="item-top">
                    <p>任务名称</p>
                    <span>{{ item.taskInfo.title }}</span>
                </div>
                <hr />
                <div class="item-bottom">
                    <p>
                        <span>创建时间</span>
                        <span class="sty-span">{{ item.taskInfo.deadline }}</span>
                    </p>
                    <p>
                        <span>截至时间</span>
                        <span class="sty-span">{{ item.taskInfo.deadline }}</span>
                    </p>
                    <p>
                        <span>创建人</span>
                        <span class="sty-span" style="margin-left: 4rem;">{{ item.taskInfo.createName }}</span>
                        <van-tag v-if="item.taskInfo.tag" :color="item.taskInfo.tag.tagColor" size="large"
                            :text-color="item.taskInfo.tag.textColor" style="margin-left: 6.5rem;padding: 0.5rem">{{
                                item.taskInfo.tag.tagText
                            }}</van-tag>
                    </p>
                </div>
            </div>
        </div>
        <!-- v-if="tableTask == ''" -->
        <div class="bg-box"  v-if="tableTask == ''">
            <!-- v-if="tableTask == undefined" -->
            <img src="../../assets/images/tasklist/bg1.png">
            <p>暂无任务</p>
        </div>
        <div class="add-box" @click="clickAdd">
            <img src="../../assets/images/tasklist/add.png" />
        </div>
        <div class="action-box">
            <van-action-sheet round v-model:show="actionShow" @close="closeAction" style="font-size: larger;"
                title="选择任务状态">
                <div class="content">
                    <van-radio-group v-model="seaForm.state">
                        <van-radio checked-color="#3F8CFF" name="0">待办任务</van-radio>
                        <van-radio checked-color="#3F8CFF" name="1">已办任务</van-radio>
                        <van-radio checked-color="#3F8CFF" name="2">超期未完成</van-radio>
                        <van-radio checked-color="#3F8CFF" name="">全部</van-radio>
                    </van-radio-group>
                    <van-button type="primary" color="#3F8CFF" @click="submitSelect">确定</van-button>
                </div>
            </van-action-sheet>
        </div>

    </div>
</template>

<script setup="taskList">
import { onMounted, reactive } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { getTask, taskDetail } from '../../api/index'

const router = useRouter()
const route = useRoute()


//弹窗打开
let actionShow = ref(false)
//筛选状态
let seaForm = reactive({
    state: ''
})

const tableTask = ref([
    // {
    //     taskInfo: {
    //         id: 'num123',
    //         title: '111',
    //         createName: '赵健',
    //         content: '干活', //任务描述
    //         classify: '1',
    //         priority: '1',
    //         reminderTime: '6',  //时间提醒
    //         deadline: '2023-04-03 12:00:00',
    //         state: 0, //任务状态 0待办 1已办 2超期未完成
    //         imageUrl: [],  //图片地址
    //         recordUrl: [],  //录音地址
    //     }
    // }
])
// {
//         id: 'num123',
//         title: '111',
//         createName: '赵健',
//         content: '干活', //任务描述
//         classify: '1',
//         priority: '1',
//         reminderTime: '6',  //时间提醒
//         deadline: '2023-04-03 12:00:00',
//         state: 0, //任务状态 0待办 1已办 2超期未完成
//         imageUrl: [],  //图片地址
//         recordUrl: [],  //录音地址
//     }

// onBeforeRouteLeave((to, from, next) => {
//     // 判断数据是否有更改
//     if (from.name == 'taskList') {
//         if (to.name == 'taskAdd') {
//             console.log(to.meta.keepAlive, 'from');
//             // to.meta.keepAlive = false;
//         }
//     }
//     next();
// });

//点击筛选
const clickSelect = () => {
    actionShow.value = true
}
//筛选关闭触发
const closeAction = () => {
    actionShow.value = false
}
//筛选提交
const submitSelect = () => {
    console.log(seaForm.state, 'value');
    closeAction()
    getList()
}
//查看详情
const clickDetail = (id) => {
    router.push({
        name: 'taskDetail',
        query: {
            id
        }
    })
}
const clickAdd = () => {
    const dialogTitle = '添加任务'
    router.push({
        name: 'taskAdd',
        query: {
            dialogTitle
        }
    })
}

const tagType = (Task) => {
    Task.forEach(e => {
        let tag = {}
        if (e.taskInfo.priority == 0) {
            tag.tagText = '较低'
            tag.tagColor = '#E0F9F2'
            tag.textColor = '#00D097'
            e.taskInfo.tag = tag


        } else if (e.taskInfo.priority == 1) {
            tag.tagText = '一般'
            tag.tagColor = '#F4F9FD'
            tag.textColor = '#3F8CFF'
            e.taskInfo.tag = tag

        } else if (e.taskInfo.priority == 2) {
            tag.tagText = '紧急'
            tag.tagColor = 'rgb(235 214 239)'
            tag.textColor = '#C418E6'
            e.taskInfo.tag = tag
        }
    })
}
//查询
const getList = () => {
    getTask({ params: seaForm }).then(res => {
        if (res.data.code == 200) {
            tableTask.value = res.data.data
            tagType(tableTask.value)
        }
    })
}

onMounted(() => {
    getList()
})

</script>

<style scoped lang="scss">
.title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .img-right {
        border-radius: 1rem;

        img {
            width: 3rem;
            height: 3rem;
            border-radius: 1rem;
        }
    }
}

.task-list-box {
    margin-top: 1rem;

    .list-item {
        background: #FFFFFF;
        border-radius: 1rem;
        width: 100%;
        height: 15rem;
        padding: 1rem;
        margin-bottom: 2rem;

        .item-top {
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        p {
            color: #999999;
            // display: flex;
            // justify-content: space-between;
        }

        span {
            font-size: 1rem;
            font-weight: lighter;
        }

        .item-bottom {
            margin-top: 1rem;

            .sty-span {
                margin-left: 3rem;
                color: #000000;
            }

            p {
                line-height: 1.8rem;
                margin-top: 1rem;
            }
        }
    }
}

.bg-box {
    position: fixed;
    width: 100%;
    min-height: 6rem;
    top: 37%;
    left: 36%;

    img {
        height: 11rem;
        width: 11rem;
    }

    p {
        color: #999999;
        font-size: 1rem;
        margin-left: 2.5rem;
    }
}

.add-box {
    position: fixed;
    right: 0.5rem;
    top: 39rem;
}

:deep(.van-action-sheet__header) {
    font-size: 1.4rem;
    font-weight: lighter;
    margin: 0.5rem 0;
}

:deep(.content) {
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;

    .van-radio {
        margin-bottom: 1.5rem;

        .van-icon {
            border-color: #0A1629;
        }

        .van-radio__label {
            margin-left: 2rem;
        }
    }

    .van-button--primary {
        border-radius: 1rem;
        width: 100%;
        margin-bottom: 1rem;
    }

}
</style>